<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>文档列表 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="/img/favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<!-- Vendor styles -->
<link rel="stylesheet" data-th-href="@{/css/material-design-iconic-font/css/material-design-iconic-font.min.css}">
<link data-th-href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link data-th-href="@{/css/materialdesignicons.min.css}" rel="stylesheet">
<link data-th-href="@{/css/style.min.css}" rel="stylesheet">
<link data-th-href="@{/css/app.css}" rel="stylesheet">
<!-- Bootstrap Table -->
<link rel="stylesheet" data-th-href="@{/css/bootstrap-table/bootstrap-table.css}">
<!--对话框-->
<link rel="stylesheet" data-th-href="@{/js/jconfirm/jquery-confirm.min.css}">
<!--时间选择插件-->
<link rel="stylesheet" data-th-href="@{/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css}">
<!--日期选择插件-->
<link rel="stylesheet" data-th-href="@{/js/bootstrap-datepicker/bootstrap-datepicker3.min.css}">
<!-- 图片预览 -->
<link rel="stylesheet" data-th-href="@{/js/viewerjs/dist/viewer.css}">
<!-- jstree -->
<link rel="stylesheet" data-th-href="@{/css/jsTree/style.min.css}">
<link data-th-href="@{/css/app.css}" rel="stylesheet">
<script type="text/javascript" data-th-src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" data-th-src="@{/js/bootstrap.min.js}"></script>
<script data-th-src="@{/js/jquery-validate/jquery.validate.min.js}"></script>
<script data-th-src="@{/js/jquery-validate/additional-methods.min.js}"></script>
<script data-th-src="@{/js/jquery-validate/messages_zh.min.js}"></script>
<script data-th-src="@{/js/jsTree/jstree.js}"></script>
<script data-th-src="@{/js/multiple-select/multiple-select.js}"></script>
<script data-th-src="@{/js/ckeditor/ckeditor.js}"></script>
<script data-th-src="@{/js/jQuery-File-Upload/js/vendor/jquery.ui.widget.js}"></script>
<script data-th-src="@{/js/jQuery-File-Upload/js/jquery.iframe-transport.js}"></script>
<script data-th-src="@{/js/jQuery-File-Upload/js/jquery.fileupload.js}"></script>
<script data-th-src="@{/js/jQuery-File-Upload/js/jquery.fileupload-process.js}"></script>
<script data-th-src="@{/js/jQuery-File-Upload/js/jquery.fileupload-ui.js}"></script>
</head>
  
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
       <!--左侧导航-->
    <th:block data-th-include="admin/common/aside"></th:block>
    <!--End 左侧导航-->
    
    <!--头部信息-->
    <th:block data-th-include="admin/common/header"></th:block>
    <!--End 头部信息-->
    
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      <div class="container-fluid">
		<div class="card profile" style="padding: 1.2rem">
		    <div class="profile__img">
		        <img alt="">
		        <a href="javascript:void(0)" class="zmdi zmdi-edit profile__img__edit" title="更换头像"></a>
		    </div>
		    <div class="actions" style="margin-right: 1rem">
		        <a href="javascript:void(0)" onclick="editUserProfile()" style="color: #707070 !important">编辑资料</a>
		    </div>
		    <div class="profile__info">
		        <ul class="icon-list">
		            <li><i class="zmdi zmdi-account"></i> <span style="font-weight: 600">[[${user.username}]]</span> --
		                [[${user.roleName}]]
		            </li>
		            <li><i class="zmdi zmdi-male-female"></i> [[${user.ssex}]]</li>
		            <li><i class="zmdi zmdi-card-travel"></i> [[${#strings.defaultString(user.deptName,'无部门信息')}]]</li>
		            <li><i class="zmdi zmdi-phone"></i> [[${#strings.defaultString(user.mobile,'未绑定手机号')}]]
		                <a data-th-if="${not #strings.isEmpty(user.mobile)}" onclick="mobileUnbind();"
		                   style="color:#03A9F4;margin-left: .5rem;">[ 解除绑定 ]</a>
		                <a data-th-if="${#strings.isEmpty(user.mobile)}" onclick="mobileBind();"
		                   style="color:#03A9F4;margin-left: .5rem;">[ 立即绑定 ]</a>
		            </li>
		            <li id="profile__info_email"><i class="zmdi zmdi-email"></i><span> [[${#strings.defaultString(user.email,'无邮箱信息')}]]</span>
		            </li>
		            <li><i class="zmdi zmdi-comment-text"></i>
		                <span>[[${#strings.defaultString(user.description,'暂无个人介绍')}]]</span></li>
		            <li>
		                <a id="connet_qq"><img style="width: 1.4rem;"/></a>&nbsp;&nbsp;
		                <a id="connect_wechat"><img style="width: 1.6rem;"/></a>
		            </li>
		            <form id="connect_qq_form" action="/connect/qq" method="post" style="display: none"></form>
		            <form id="disconnect_qq_form" action="/connect/qq" method="post" style="display: none"><input name="_method"/></form>
		            <form id="connect_wechat_form" action="/connect/weixin" method="post" style="display: none"></form>
		            <form id="disconnect_wechat_form" action="/connect/weixin" method="post" style="display: none"><input name="_method"/></form>
		        </ul>
		    </div>
		</div>
		<div class="modal fade" id="update-profile" data-keyboard="false" data-backdrop="static" tabindex="-1">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <h3 class="modal-title pull-left">个人信息</h3>
		            </div>
		            <div class="modal-body">
		                <form id="update-profile-form">
		                                <div class="form-group">
		                                     <label for="usernamet" class="control-label">用户名：</label>
		                                    <input type="text" name="username" class="form-control">
		                                    <input type="text" hidden name="oldusername" class="form-control">
		                                    <input type="text" hidden name="userId" class="form-control">
		                                </div>
		                                <div class="form-group">
		                                    <label for="usernamet" class="control-label">性别：</label>
		                                    <div class="form-control">
			                                    <label class="custom-control custom-radio">
			                                        <input name="ssex" type="radio" value="0" class="custom-control-input">
			                                        <span class="custom-control-indicator"></span>
			                                        <span class="custom-control-description">男</span>
			                                    </label>
			                                    <label class="custom-control custom-radio">
			                                        <input name="ssex" type="radio" value="1" class="custom-control-input">
			                                        <span class="custom-control-indicator"></span>
			                                        <span class="custom-control-description">女</span>
			                                    </label>
			                                    <label class="custom-control custom-radio">
			                                        <input name="ssex" type="radio" value="2" class="custom-control-input">
			                                        <span class="custom-control-indicator"></span>
			                                        <span class="custom-control-description">保密</span>
			                                    </label>
		                                    </div>
		                                </div>
		                                <div class="form-group">
		                                    <label for="email" class="control-label">邮箱：</label>
		                                    <input type="text" name="email" class="form-control">
		                                </div>
		                                <div class="form-group">
		                                    <label for="email" class="control-label">个人描述：</label>
		                                    <input type="text" name="description" class="form-control">
		                                </div>		                                
		                                <div class="form-group">
		                                    <label for="email" class="control-label">部门：</label>
		                                    <input type="hidden" name="deptId">
		                                    <div id="deptTree"></div>
		                                </div>
		                </form>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary btn-save">保存</button>
		                <button type="button" class="btn btn-secondary btn-close">取消</button>
		                <button class="btn-hide"></button>
		            </div>
		        </div>
		    </div>
		</div>
		<div class="modal fade" id="default-avatars" data-keyboard="false" data-backdrop="static" tabindex="-1">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <h3 class="modal-title pull-left">更换头像</h3>
		            </div>
		            <div class="modal-body">
		                <form>
		                    <div class="row default_avatars_list">
		                        <img data-th-src="@{/img/avatar/default.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165920.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165927.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165754.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165815.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165821.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165827.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165834.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165840.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165846.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165855.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165909.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165914.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165936.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165942.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165947.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414165955.jpg}" title="点击更换！">
		                        <img data-th-src="@{/img/avatar/20180414170003.jpg}" title="点击更换！">
		                    </div>
		                </form>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-secondary btn-close" id="close_update_avatar_button"
		                        data-dismiss="modal">取消
		                </button>
		                <button class="btn-hide"></button>
		            </div>
		        </div>
		    </div>
		</div>
		<div class="modal fade" id="mobile-bind" data-keyboard="false" data-backdrop="static" tabindex="-1">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <h3 class="modal-title pull-left">绑定手机号</h3>
		            </div>
		            <div class="modal-body">
		                <form id="mobile-bind-form">
		                                <div class="form-group">
		                                    <label for="mobile" class="control-label">手机号：</label>
		                                    <input type="text" name="mobile" class="form-control">
		                                </div>
		                                <div class="form-group">
		                                   <label for="smsCode" class="control-label">验证码：</label>
		                                   <input type="text" name="smsCode" class="form-control">
		                                </div>
		                    <div class="row" style="display: flex;flex-direction: row-reverse;">
		                        <a href="javascript:void(0)" onclick="sendCode(1)"
		                           style="color: #32c787;font-weight: 600;display:flex;flex-direction: row-reverse;margin-right: 5.3rem;">发送短信验证码</a>
		                    </div>
		                </form>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary btn-save">绑定</button>
		                <button type="button" class="btn btn-secondary btn-close">取消</button>
		                <button class="btn-hide"></button>
		            </div>
		        </div>
		    </div>
		</div>
		<div class="modal fade" id="mobile-unbind" data-keyboard="false" data-backdrop="static" tabindex="-1">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <h3 class="modal-title pull-left">解绑手机号</h3>
		            </div>
		            <div class="modal-body">
		                <form id="mobile-unbind-form">
		                                <div class="form-group">
		                                    <label for="mobile" class="control-label">手机号：</label>
		                                    <input readonly="readonly" type="text" name="mobile" class="form-control"
		                                           data-th-value="${user.mobile}">
		                                </div>
		                                <div class="form-group">
		                                    <label for="smsCode" class="control-label">验证码：</label>
		                                    <input type="text" name="smsCode" class="form-control">
		                                </div>
		                    <div class="row" style="display: flex;flex-direction: row-reverse;">
		                        <a href="javascript:void(0)" onclick="sendCode(2)"
		                           style="color: #32c787;font-weight: 600;display:flex;flex-direction: row-reverse;margin-right: 5.3rem;">发送短信验证码</a>
		                    </div>
		                </form>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-primary btn-save">解绑</button>
		                <button type="button" class="btn btn-secondary btn-close">取消</button>
		                <button class="btn-hide"></button>
		            </div>
		        </div>
		    </div>
		</div>
      </div>
      
    </main>
    <!--End 页面主要内容-->
  </div>
</div>
<script data-th-inline="javascript">
var ctx = [[@{/}]];
var avatar = ctx + "img/avatar/" + [[${user.avatar}]];
var userId = [[${user.userId}]];
</script>
<!--时间选择插件-->
<script data-th-src="@{/js/bootstrap-datetimepicker/moment.min.js}"></script>
<script data-th-src="@{/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js}"></script>
<script data-th-src="@{/js/bootstrap-datetimepicker/locale/zh-cn.js}"></script>
<script type="text/javascript" data-th-src="@{/js/main.min.js}"></script>
<script type="text/javascript" data-th-src="@{/js/bootstrap-table/bootstrap-table.min.js}"></script>
<script type="text/javascript" data-th-src="@{/js/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
<!--消息提示-->
<script data-th-src="@{/js/bootstrap-notify.min.js}"></script>
<!--对话框-->
<script data-th-src="@{/js/jconfirm/jquery-confirm.min.js}"></script>
<script type="text/javascript" data-th-src="@{/js/lightyear.js}"></script>
<script type="text/javascript" data-th-src="@{/js/common.js}"></script>
<script data-th-src="@{/js/app/admin/system/user/profile.js}"></script>
<script type="text/javascript" data-th-src="@{/js/perfect-scrollbar.min.js}"></script>
<div data-th-include="admin/system/user/updatePassword"></div>
</body>
</html>